<template>
  <div id="app">
    <header v-show="!$route.meta.LeftTabHidden">
      <h3><img src="../public/logo.png" alt="" />有家驿站——宠物领养管理系统</h3>
      <div class="user">
        <el-avatar
          :size="40"
          class="mr-3"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        <span class=""> {{ users || '未登录' }} </span>
        <el-tag class="icon" @click="OutLogin">退出登录</el-tag>
      </div>
    </header>

    <div style="display: flex">
      <!-- 侧边栏 -->
      <SlideBar v-if="!$route.meta.LeftTabHidden" class="slidebar"></SlideBar>
      <div style="width: 84%; background-color: #f7f8f9">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import SlideBar from "./components/SlideBar.vue";
import { APPinit } from "@/utils/Lxz-axios";
import { ElMessage } from "element-plus";

import { useRouter } from "vue-router";

let router = useRouter();

// 初始化页面校验登录状态逻辑
let tokens = localStorage.getItem("token");
if (tokens) {
  APPinit(tokens).then((res) => {
    console.log("res", res);

    if (res.data.initcode == 0) {
      ElMessage.error(`登录态已过期，请重新登录`);
      localStorage.removeItem('token')
      localStorage.removeItem('users')

      router.push("/login");
    } else if (res.data.initcode == 1) {
      ElMessage({
        message: `欢迎回来!管理员`,
        type: "success",
      });
    }
  })
} else {
  ElMessage.error("请先登录");
  localStorage.removeItem('token')
  localStorage.removeItem('users')

  router.push('/login')
}

// 引入pinia数据
import { storeToRefs } from 'pinia'
import { useCounterStore } from './stores/Lxz.js'

// 获取pinia实例内容
const FilmDataStore = useCounterStore()

// 获取pinia数据使用这种方式
const { users } = storeToRefs(FilmDataStore)

// //引入pinia内的方法
// // const { AddOrders, PayForTheOrder } = FilmDataStore

// 退出登录逻辑
const OutLogin = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('users')
  ElMessage({
        message: `已退出登录！`,
        type: 'warning',
      })
  router.push("/login");
}
</script>

<style lang="less" scoped>
#app {
  font-size: 16rem;
  height: 100vh;
  background-color: #f7f8f9;

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20rem;
    border-bottom-right-radius: 10rem;
    border-bottom-left-radius: 10rem;

    h3 {
      display: flex;
      align-items: center;
      font-weight: bold;
      color: #333;
      font-size: 15rem;
      img {
        width: 30rem;
        height: 30rem;
        margin-right: 7.5rem;
        object-fit: cover;
      }
    }

    .user {
      display: flex;
      align-items: center;
      font-size: 14rem;
      color: #666;
      .el-avatar {
        margin-right: 10rem;
      }
      span {
        margin-right: 8rem;
      }
      .el-tag {
        font-size: 10rem;
        width: 46rem;
        height: 20rem;
        background-color: #409eff;
        color: #fff;
      }
    }
  }
  .slidebar {
    border-top-right-radius: 20rem;
    overflow: hidden;
  }
}



</style>
